<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台</title>
</head>
<style>
    body {
        background: #f7f7f7;
        height: 100%;
        max-width: 640px;
        min-width: 300px;
        min-height: 100%;
        margin: 0 auto;
    }

    .mod-title {
        text-align: center;
        border-bottom: 1px solid #ddd;
        background: #fff;
    }

    h1 {
        font-family: "微软雅黑";
        font-size: 12px;
        margin: 5px 0;
        padding-bottom: 2px;
    }

    .ico_log {
        display: inline-block;
        width: 130px;
        height: 38px;
        vertical-align: middle;
        margin-right: 7px;
    }

    .ico-1 {
        background: url("../images/logo_alipay.jpg") no-repeat;
        background-size: cover;
    }

    .ico-2 {
        background: url("../images/logo_weixin.jpg") no-repeat;
    }

    .ico-3 {
        background: url("../images/logo_weixin.jpg") no-repeat;
        background-size: cover;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .ico-4 {
        background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
        background-size: cover;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .ico-7 {
        background: url("../images/udst.jpg") no-repeat;
        background-size: cover;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .ico-6 {
        background: url("../images/logo_qq.png") no-repeat;
        background-size: cover;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .mod-title .text {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        vertical-align: middle
    }

    .mod-ct {
        min-width: 300px;
        max-width: 640px;
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        background: #fff url("/assets/pay/images/wave.png") top center repeat-x;
        text-align: center;
        color: #333;
        border: 1px solid #e5e5e5;
        border-top: none
    }

    .mod-ct .order {
        font-size: 20px;
        padding-top: 10px
    }

    .mod-ct .amount {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .mod-ct .amount2 {
        font-size: 25px;
    }

    .moneySize {
        font-size: 20px;
        color: #f00;
    }

    .mod-ct .qr-image {
        margin-top: 30px
    }

    .mod-ct .qr-image img {
        width: 230px;
        height: 230px
    }

    .mod-ct .detail {
        margin-top: 10px;
        padding-top: 0px;
        padding-bottom: 10px;

    }

    .mod-ct .detail .arrow .ico-arrow {
        display: inline-block;
        width: 20px;
        height: 11px;
        background: url("../images/wechat-pay.png") -25px -100px no-repeat
    }

    .mod-ct .detail .detail-ct {
        display: none;
        font-size: 12px;
        text-align: right;
        line-height: 28px
    }

    .mod-ct .detail .detail-ct dt {
        float: left
    }

    .mod-ct .detail-open {
        border-top: 1px solid #e5e5e5
    }

    .mod-ct .detail .arrow {
        padding: 6px 34px;
        border: 1px solid #e5e5e5
    }

    .mod-ct .detail .arrow .ico-arrow {
        display: inline-block;
        width: 20px;
        height: 11px;
        background: url("../images/wechat-pay.png") -25px -100px no-repeat
    }

    .mod-ct .detail-open .arrow .ico-arrow {
        display: inline-block;
        width: 20px;
        height: 11px;
        background: url("../images/wechat-pay.png") 0 -100px no-repeat
    }

    .mod-ct .detail-open .detail-ct {
        display: block
    }

    .mod-ct .tip {
        margin-top: 20px;
        border-top: 1px dashed #e5e5e5;
        padding: 10px 0;
        position: relative
    }

    .mod-ct .tip .ico-scan {
        display: inline-block;
        width: 56px;
        height: 55px;
        background: url("/assets/pay/images/wechat-pay.png") 0 0 no-repeat;
        vertical-align: middle;
    }

    .mod-ct .tip .tip-text {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        margin-left: 23px;
        font-size: 16px;
        line-height: 28px;
    }

    .mod-ct .tip .dec {
        display: inline-block;
        width: 22px;
        height: 45px;
        background: url("../images/wechat-pay.png") 0 -55px no-repeat;
        position: absolute;
        top: -23px
    }

    .mod-ct .tip .dec-left {
        background-position: 0 -55px;
        left: -136px
    }

    .mod-ct .tip .dec-right {
        background-position: -25px -55px;
        right: -136px
    }

    .foot {
        text-align: center;
        margin: 30px auto;
        color: #888888;
        font-size: 12px;
        line-height: 20px;
        font-family: "simsun"
    }

    .copyRight {
        text-align: center;
        color: #888888;
        margin-bottom: 1px;
    }

    .copyRight a {
        color: #888888;
    }

    h1 {
        font-family: "微软雅黑";
        font-size: 12px;
        margin: 5px 0;
        padding-bottom: 2px;
    }

    .time-item strong {
        background: #3ec742;
        color: #fff;
        line-height: 25px;
        font-size: 15px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .item-title {
        background: none;
        line-height: 25px;
        font-size: 24px;
        padding: 0 10px;
        float: left;
    }

    .paybtn {
        display: inline-block;
        width: 100%;
        height: 80px;
        vertical-align: middle;
        padding-top: 10%;
        margin-right: 7px
    }


    .submit_alipay {
        font-size: 16px;
        font-family: Arial;
        font-weight: normal;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid #84bbf3;
        padding: 9px 76px;
        text-decoration: none;
        background: -moz-linear-gradient(center top, #79bbff 105%, #378de5 0%);
        background: -ms-linear-gradient(top, #79bbff 105%, #378de5 0%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
        background: -webkit-gradient(linear, left top, left bottom, color-stop(105%, #79bbff), color-stop(0%, #378de5));
        background-color: #79bbff;
        color: #ffffff;
        display: inline-block;
        text-shadow: 1px 1px 0px #528ecc;
        -webkit-box-shadow: 0px 0px 0px 0px #bbdaf7;
        -moz-box-shadow: 0px 0px 0px 0px #bbdaf7;
        box-shadow: 0px 0px 0px 0px #bbdaf7;
    }

    .submit_alipay:active {
        position: relative;
        top: 1px;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        width: 80%;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn:hover,
    .btn:focus {
        color: #333;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        pointer-events: none;
        cursor: not-allowed;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }

    .btn-primary {
        color: #fff;
        background-color: #428bca;
        border-color: #357ebd;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open>.dropdown-toggle.btn-primary {
        color: #fff;
        background-color: #3071a9;
        border-color: #285e8e;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open>.dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary .badge {
        color: #428bca;
        background-color: #fff;
    }

    .f-bold {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* This css button was generated by css-button-generator.com */
    @media screen and (max-width: 768px) {
        /*body,.body {*/
        /*max-width: 100%;*/
        /*min-width: 100%;*/
        /*min-height: 100%;*/
        /*width: 100%;*/
        /*}*/
        /*.mod-title {*/
        /*height: 18rem;*/
        /*line-height: 18rem;*/
        /*}*/
        /*.ico_log {*/
        /*width: 40%;*/
        /*height: 12rem;*/
        /*margin-top: 3rem;*/
        /*}*/
    }

    .n-wx-zfb {}
</style>

<body>
    <h1 class="mod-title">
        <span class="ico_log ico-4"></span>
    </h1>

    <div class="mod-ct">
        <div class="order">
        </div>
        <div style="margin-top: 10px;">
            <span style="color: red;">提示：付款金额要与显示的金额一致，否则后果自负</span>
        </div>
        <div class="amount" id="money">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText"
                class="amount2">{$pay.price}</span>元<span onclick="copy();"
                style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span></div>
        <div class="paybtn" style="display: none;"><a href="" id="alipaybtn" class="btn btn-primary"
                target="_blank">启动支付宝App支付</a>
        </div>

        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" class="qrcode-img-area">
                <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                <div style="position: relative;display: inline-block;">
                    {switch name="pay.paytype"}
                        {case value="0"}
                            <img id="imgCode" src="{$pay.wxcode}" style="width: 220px;height: 220px;">
                        {/case}

                        {case value="1"}
                            <img id="imgCode" src="{$pay.zfbcode}" style="width: 220px;height: 220px;">
                        {/case}
                    {/switch}
                </div>
            </div>
        </div>

        <div class="time-item" style="padding-top: 10px">
            <div class="time-item" id="msg">
                <h1 class="overtime">订单名称：<span>{$pay.name}</span></h1>
            </div>
            <div class="time-item">
                <h1>订单号:<span data-payid="{$pay.id}">{$pay.code}</span></h1>
                <input type="hidden" value="{$pay.id}" id="payid">
            </div>
            <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
            <strong id="minute_show">0分</strong>
            <strong id="second_show">0秒</strong>
            <div class="time-item"></div>
        </div>
        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
                

                {switch name="pay.paytype"}
                    {case value="0"}
                        <p id="showtext">打开微信[扫一扫]</p>
                    {/case}

                    {case value="1" }
                        <p id="showtext">打开支付宝[扫一扫]</p>
                    {/case}
                {/switch}
            </div>
        </div>

        <!--[if IE 8]>
            <div class="tip-text" style="color:#ff0000">您的浏览器版本较低，请升级后再试！</div>
        <![endif]-->
    </div>
</body>

</html>

<script>

    let url = `{:config('site.url')}`;

    let statusUrl = url + '/pay/index/status';

    // 订单超时时间
    var maxtime = 3 * 60;

    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "订单支付有效期" + minutes + "分" + seconds + "秒";
            document.getElementById('minute_show').innerText = minutes + "分";
            document.getElementById('second_show').innerText = seconds + "秒";

            --maxtime;
        } else {
            clearInterval(timers);
            clearInterval(interval);
            state = false;
            document.getElementById('imgCode').src = '/assets/pay/images/qrcode_timeout.png';

            if (window.confirm('订单已失效，请手动关闭页面，请重新下单')) {
                return true;
            } else {
                return false;
            }
        }
    }

    timers = setInterval("CountDown()", 1000);

    var interval = setInterval(getPayId, 3000);

    function getPayId() {
        var payid = document.getElementById("payid").value;
        
        if (payid != "" && payid != "undefined") {
            getStatus(payid);
        }
    }

    

    function getStatus(payid)
    {   
        // 创建异步对象
        let xhr = new XMLHttpRequest();

        // 设置请求类型，请求地址，是否异步 默认true
        xhr.open("post",statusUrl, true);

        // 设置头信息
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        // 请求参数
        xhr.send('payid=' + payid);

        // 绑定异步请求状态变化事件
        xhr.onreadystatechange = function()
        {
            // readyState的值表示当前请求的状态
            if(xhr.readyState == 4)
            {
                // status存储服务器端返回的HTTP请求响应代码,它表⽰请求的处理结果
                if(xhr.status == 200)
                {
                    // 请求成功，接收服务器返回结果
                    let result = JSON.parse(xhr.responseText);

                    if(result.code === 1)
                    {
                        let reurl = result.data.reurl ? result.data.reurl : '';

                        if(reurl)
                        {
                            location.href = reurl;
                        }else{
                            window.history.go(-1);
                        }
                    }else{
                        if(result.msg === '支付订单不存在')
                        {
                            alert(result.msg);

                            window.history.go(-1);
                        }
                    }
                }else
                {
                    // ⽹络失败或服务器错误
                    console.log('请求失败')
                }
            }
        }

    }


    function copy() {

        var text = document.getElementById("copyText").innerText;

        var input = document.createElement('input');
        input.setAttribute('id', 'copyInput');

        input.setAttribute('value', text);

        document.getElementsByTagName('body')[0].appendChild(input);

        document.getElementById('copyInput').select();

        document.execCommand('copy')

        alert('已复制金额');

        document.getElementById('copyInput').remove();

    }
</script>